
{% extends 'commonTmp.html' %}
{% block main %}

<!--====================================================================
            Start Hero Section
        =====================================================================-->
        <section class="hero-section">
            <div class="hero-slider">

                <!-- hero-slide-item -->
                {% for cul in carousel_list %}

                <div class="hero-slide-item"
                     style=" background-image:url({% static "assets/img/hero/" %}{{cul.carousel_img}}")>

                <div class="container">
                        <div class="hero-inner">
                            <h1 class="mb-20 light">{{cul.carousel_introduction}}<span>{{cul.carousel_introduction_tow}}</span></h1>
<!--                             <h1 class="mb-20 light">Order <span>Online</span>, Save <span>Your </span>Time</h1>-->
                            <p class="mb-40 mr-120 light">{{cul.carousel_desc}}</p>
                            <div class="hero-btn">
                                <a href="{% url 'shop' cul.carousel_url  1%}" class="theme-btn">商品详情</a>
                            </div>
                        </div>

                    </div>
                </div>


           {% endfor %}




        </section>
        <!--====================================================================
            End Hero Section
        =====================================================================-->



        <!--====================================================================
            Start Special Offer Section
        =====================================================================-->
        <section class="special-offer text-center pt-110 rpt-70 pb-35">
            <div class="container">
                <div class="section-title mb-15">
                    <h2>{{cart_goods_list.0.cag_name}}</h2>
                    <p> {{cart_goods_list.0.cag_css}}</p>
                </div>
                <div class="row justify-content-center">
                    <div class="col-lg-10">

                        <div class="special-offer-inner special-offer-slider">

                            {%  for gl in  goods_list  %}
                            <!--single Product -->
                            <div class="single-product">
                                <div class="special-offer-product bg-white m-25 p-25 b1 br-5">
                                    <div class="off">{{gl.goods_tips}}<span></span></div>
                                    <div class="product-img-wrap">

                                          <img src="{% static 'assets/img/goods/' %}{{gl.goods_img}}" alt="img" >
                                    </div>
                                    <div class="product-content">
                                        <div class="offer-product-price">
                                            <span class="discounted-price">￥{{gl.goods_price}}</span>
                                            <span class="actual-price has-discount">￥{{gl.goods_org_price}}</span>
                                        </div>

                                        <p class="overflowhidden">{{gl.goods_name}} {{gl.goods_desc}}</p>
                                    </div>
                                    <div class="product-action" style="display: flex;justify-content: center;align-content: center">
                                        <a href="{% url 'shopDetails' gl.id gl.goods_cag_id %}" class="add-to-btn">商品详情</a>
                                    </div>
                                </div>
                            </div>
                           {% endfor %}

                        </div>

                    </div>
                </div>

            </div>
        </section>
        <!--====================================================================
            End Special Offer Section
        =====================================================================-->



         <section class="advertise-offer pt-60 pb-50 rpt-20 rpb-10">
            <div class="container">
                <div class="row col-gap-40">
                    <div class="col-lg-7 rmb-30">
                        <div class="advertise d-flex align-items-center justify-content-between h-100 bg-color1 br-5">
                            <div class="advertise-text pt-40 pl-40 pb-40">
                                <h6>Fresh Vegetables</h6>
                                <h3>Healthy Vegetables</h3>
                                <p>Get 20% Off Selected Product</p>
                                <a href="{% url 'shop' 4 1%}" class="theme-btn">立即购买</a>
                            </div>
                            <div class="advertise-img pr-20">
                                <img src="{%static 'assets/img/product/f1.png' %}" alt="">
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-5">
                        <div class="advertise d-flex align-items-center justify-content-between h-100 bg-color2 br-5">
                            <div class="advertise-text pt-40 pl-40 pb-40">
                                <h6>Home Appliances</h6>
                                <h3>Appliances</h3>
                                <p>Get 20% Off Selected Product</p>
                                <a href="{% url 'shop' 1 1%}" class="theme-btn">立即购买</a>
                            </div>
                            <div class="advertise-img  pr-20">
                                <img src="{% static 'assets/img/goods/goods001.jpg' %}" alt="">
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </section>





        <!--====================================================================
            Start categories-product Section
        =====================================================================-->
        <section class="categories-section text-center pt-60 pb-30">
            <div class="container">
                <div class="section-title mb-45">
                      <h2>{{cart_goods_list.1.cag_name}}</h2>
                    <p> {{cart_goods_list.1.cag_css}}</p>
                </div>
                <div class="row">
                     {% for gl2 in goods_list2  %}
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 mb-30">
                        <a href="{% url 'shopDetails' gl2.id gl2.goods_cag_id %}" class="categori-item bg-white br-5">
                            <div class="categori-img d-flex align-items-center justify-content-center">
                                <img src="{% static 'assets/img/goods/' %}{{gl2.goods_img}}" alt="img">
                            </div>
                            <div class="categori-name">
                                <span>{{gl2.goods_desc}}</span>
                            </div>
                        </a>
                    </div>
                     {% endfor %}

                </div>

            </div>
        </section>
        <!--====================================================================
            End categories-product Section
        =====================================================================-->



        <!--====================================================================
            Start advertise offer Section two
        =====================================================================-->
        <section class="advertise-offer pt-60 pb-60 rpt-20 rpb-20">
            <div class="container">
                <div class="row col-gap-40">
                    <div class="col-lg-6 rmb-30">
                        <div class="advertise d-flex align-items-center justify-content-between h-100 bg-color3 br-5">
                            <div class="advertise-text pt-40 pl-40 pb-40">
                                <h6>Fresh Fruits</h6>
                                <h3>Healthy Food</h3>
                                <p>Get 20% Off Selected Product</p>
                                <a href="{% url 'shop' 1 1%}" class="theme-btn">立即下单</a>
                            </div>
                            <div class="advertise-img pr-20">
                                <img src="{% static 'assets/img/product/f3.png' %}" alt="">
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="advertise d-flex align-items-center justify-content-between h-100 bg-color4 br-5">
                            <div class="advertise-text pt-40 pl-40 pb-40">
                                <h6>Fresh Fruits</h6>
                                <h3>Healthy Food</h3>
                                <p>Get 20% Off Selected Product</p>
                                <a href="{% url 'shop' 1 1%}" class="theme-btn">立即下单</a>
                            </div>
                            <div class="advertise-img  pr-20">
                                <img src="{% static 'assets/img/product/f4.png' %}" alt="">
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </section>
        <!--====================================================================
            End advertise offer Section two
        =====================================================================-->



        <!--====================================================================
            Start Made For You Section
        =====================================================================-->
        <section class="made-for-product text-center pt-45 pb-20">
            <div class="container">
                <div class="section-title mb-45">
                   <h2>{{cart_goods_list.3.cag_name}}</h2>
                    <p> {{cart_goods_list.3.cag_css}}</p>
                </div>
                <div class="row">

                    <!--single Product -->
                    {% for gl3 in goods_list3 %}
                    <div class="custom-5-item col-xl-3 col-lg-4 col-md-6">
                        <div class="product">
                            <div class="product-img-wrap">
                                <img src="{% static 'assets/img/product/' %}{{gl3.goods_img}}" alt="img">
                                <!-- Button trigger modal -->
                                <button class="quick-view" type="button"  >{{gl3.goods_tips}}</button>
                            </div>

                            <div class="product-content-wrap">
                                <div class="product-content">
                                    <p><a href="{% url 'shopDetails' gl3.id  gl3.goods_cag_id%} ">{{gl3.goods_desc}} <br>(1 kg)</a></p>
                                </div>
                                <div class="product-action">
                                    <a href="{% url 'shopDetails' gl3.id gl3.goods_cag_id %}" class="add-to-btn small-btn">
                                        <i class="flaticon-shopping-cart"></i>
                                        <span>商品详情</span>
                                        <h5 class="product-price">￥{{gl3.goods_price}}</h5>
                                    </a>

                                </div>
                            </div>

                        </div>
                    </div>
                    {% endfor %}

                </div>

            </div>
        </section>

        <!--====================================================================
            End Made For You Section
        =====================================================================-->



        <!--====================================================================
           Start Latest News Section
       =====================================================================-->
        <section class="latest-news pt-10 pb-90 rpb-50">
            <div class="container">
                <div class="section-title text-center mb-45">
                  <h2>{{cart_goods_list.4.cag_name}}</h2>
                    <p> {{cart_goods_list.4.cag_css}}</p>
                </div>

                <div class="row col-gap-60">

                    <!-- single news Block -->
                    {% for gl4 in goods_list4 %}
                    <div class="col-xl-3 col-lg-4 col-md-6">
                        <div class="latest-news-box mb-30">
                            <div class="latest-news-img">
                             <img src="{% static 'assets/img/goods/' %}{{gl4.goods_img}}" alt="img">
                            </div>
                            <div class="latest-news-content">
                                <div class="post-title br-5">
                                    <span class="date">{{gl4.goods_name}}</span>
                                    <h5><a href="blog-details.html">{{gl4.goods_tips}}</a></h5>
                                </div>
                                <p>{{gl4.goods_desc}}</p>
                                <div class="blog-meta">
                                    <a href="{% url 'shopDetails' gl4.id gl4.goods_cag_id %} " class="theme-btn br-30 ml-20" style="color: #FFFFFF">加入购物车</a>
                                </div>
                            </div>
                        </div>
                    </div>
                   {% endfor %}

                </div>

            </div>
        </section>
        <!--====================================================================
           End Latest News Section
       =====================================================================-->
 {% endblock %}